<template>
    <div>
        <VueUeditorWrap :config="config" @beforeInit="addCustomDialog" :style="'width:'+width+'%;'" ref="ueditor" v-model="revalue"></VueUeditorWrap>
    </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module

export default {
    components: {
        VueUeditorWrap,
    },
    data() {
        return {
            config: {
                autoHeightEnabled: false, // 编辑器不自动被内容撑高
                initialFrameHeight: 500, // 初始容器高度
                initialFrameWidth: '100%', // 初始容器宽度
                UEDITOR_HOME_URL: '/UEditor/',
                serverUrl: '',
            },
            revalue: this.value,
        }
    },
    props: {
        value: {
            Type: String,
            default: '',
        },
        width: {
            default: '80',
            Type: String,
        },
    },
    model: {
      // 需要双向绑定的 props 变量名称，也就是父组件通过 v-model 与子组件双向绑定的变量
      prop: 'value',
      // 定义由 $emit 传递变量的名称
      event: 'newValue'
    },
    watch:{
        revalue(val){
            this.$emit('newValue', this.revalue)
        }
    },
	methods:{
		addCustomDialog(){
			window.UE.registerUI(
                'upLoadImage',
                function (editor, uiName) {
                    let dialog = new window.UE.ui.Dialog({
                        iframeUrl: window.location.origin+'/#/medium/index?file=image',
                        editor: editor,
                        name: uiName,
                        title: '上传图片',
                        cssRules: 'width:1200px;height:500px;padding:20px;',
                    })
                    this.dialog = dialog

                    var btn = new window.UE.ui.Button({
                        name: 'dialog-video',
                        title: '上传图片',
                        cssRules: `background-image: url(../../../assets/image/icons.png);background-position: -381px -0px;`,
                        onclick: function () {
                            dialog.render()
                            dialog.open()
                        },
                    })
                    return btn
                },
                
            )
		}
	}
}
</script>

<style lang="scss">

</style>
